import { loginApi } from '@/api';
import { Button, Form, Input } from 'antd';
import type { AxiosError } from 'axios';
import { useState } from 'react';
import OStyle from './index.less';
import type { BaseLoginProps } from './interface';
import PhoneInput from './PhoneInput';

const FormItem = Form.Item;

const PwdLogin: React.FC<BaseLoginProps> = (props) => {
  const { onSuccess } = props;
  const [errmsg, setErrmsg] = useState<{
    type: '' | 'error' | 'validating' | 'success' | 'warning' | undefined;
    text: string;
  }>({
    type: '',
    text: '',
  });
  const [isSubmit, setIsSubmit] = useState(false);
  const [loginName, setLoginName] = useState<string>();
  const [password, setPassword] = useState<string>();

  // 提交
  const handleSubmit = () => {
    if (!loginName) {
      return setErrmsg({
        type: 'error',
        text: '手机号不能为空!',
      });
    }
    if (!/^(1)\d{10}$/.test(loginName)) {
      return setErrmsg({
        type: 'error',
        text: '手机号码有误，请核验后重试！',
      });
    }
    if (!password) {
      return setErrmsg({
        type: 'error',
        text: '请输入密码！',
      });
    }
    setErrmsg({
      type: 'validating',
      text: '登录中...请稍后',
    });
    setIsSubmit(true);
    loginApi
      .authLogin({ loginName, password })
      .then(
        (res: any) => {
          const { data, message, code } = res;
          if (code === '200') {
            onSuccess(data);
          }
          setErrmsg({
            type: code === '200' ? 'success' : 'error',
            text: message,
          });
        },
        (err: AxiosError) => {
          // console.log('---authLogin--err--:', err);
          setErrmsg({
            type: 'error',
            text: err.message,
          });
        },
      )
      .finally(() => {
        setIsSubmit(false);
      });
  };

  const onPasswordInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  const onPhoneInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setLoginName(e.target.value);
  };

  return (
    <Form onFinish={handleSubmit}>
      <FormItem
        name="loginName"
        className={OStyle.input_wrap}
        style={{ marginTop: '23px', marginBottom: '32px', height: '64px' }}
      >
        <PhoneInput value={loginName} onChange={onPhoneInputChange} />
      </FormItem>
      <FormItem
        name="password"
        className={OStyle.input_wrap}
        validateStatus={errmsg.type}
        help={errmsg.text}
        style={{
          marginBottom: errmsg.type ? 44 : undefined,
          height: '64px',
        }}
      >
        <Input.Password
          placeholder="登录密码"
          autoComplete={'off'}
          size="large"
          bordered={false}
          onChange={onPasswordInputChange}
          prefix={
            <div className={OStyle.password_icon}>
              <div></div>
            </div>
          }
        />
      </FormItem>
      <FormItem
        style={{
          marginBottom: 0,
        }}
      >
        <Button
          loading={isSubmit}
          type="primary"
          size="large"
          className={OStyle.login_submit}
          disabled={!loginName || !password}
          // onClick={handleSubmit}
          htmlType="submit" // 回车键可触发form提交
        >
          登录
        </Button>
      </FormItem>
    </Form>
  );
};

export default PwdLogin;
